<template>
    <ActivityPhonePreview>
        <div class="poster_right_box">
            <div class="title_box">
                <div class="title_r">{{ props.formData.page_name }}</div>
            </div>
            <div class="content nomarl">
                <div class="boxshoder"></div>
                <img
                    v-if="isDefault && props.formData.absolute_url"
                    :src="props.formData.absolute_url"
                    class="default_bg"
                    alt="" />
                <div
                    v-if="(isDefault && !props.formData.absolute_url) || props.formData.receive_desc"
                    class="btn_box"
                    :style="{ fontSize: fontSize(), lineHeight: lineHeight() }">
                    <span :class="[props.formData.receive_desc.length == 1 ? 'oneText' : '']">{{
                        props.formData.receive_desc.substring(0, 4)
                    }}</span
                    ><br />{{ props.formData.receive_desc.substring(4, 8) }}
                </div>
            </div>
        </div>
    </ActivityPhonePreview>
</template>
<script setup lang="ts">
import { computed } from 'vue';
import ActivityPhonePreview from '../index.vue';

const props = defineProps({
    formData: {
        type: Object,
        default: () => {
            return {};
        }
    }
});
// 判断是否默认图片
const isDefault = computed(() => {
    const defaultImg = 'https://static.scrm.keyid.cn/assets/images/web-pc/WechatIMG792.png';
    return props.formData.absolute_url !== defaultImg;
});
const fontSize = () => {
    let size = 64;
    switch (props.formData.receive_desc.length) {
        case 1:
            size = 64;
            break;
        case 2:
            size = 38;
            break;
        case 3:
            size = 30;
            break;
        case 4:
            size = 34;
            break;
        case 5:
            size = 27;
            break;
        case 6:
            size = 26;
            break;
        case 7:
        case 8:
            size = 25;
            break;
        default:
            size = 18;
    }
    return `${size}px`;
};

const lineHeight = () => {
    let height = 30;
    switch (props.formData.receive_desc.length) {
        case 1:
            height = 64;
            break;
        case 2:
            height = 38;
            break;
        case 3:
            height = 30;
            break;
        case 4:
            height = 36;
            break;
        case 5:
            height = 30;
            break;
        case 6:
            height = 30;
            break;
        case 7:
        case 8:
            height = 28;
            break;
        default:
            height = 18;
    }
    return `${height}px`;
};
</script>
<style lang="scss" scoped>
.poster_right_box {
    width: 100%;
    height: 100%;
    background-color: #f3fafb;
    .title_box {
        display: flex;
        align-items: center;
        height: 26px;
        padding-left: 7px;
        background: #ffffff;
        .title_r {
            background: #ffffff;
            border-radius: 1px;
            border-bottom: 1px solid #f5f5f5;
            position: relative;
            text-align: center;
            font-size: 16px;
            font-family: STHeitiSC-Medium, STHeitiSC;
            font-weight: 500;
            color: #000000;
            height: 42px;
            line-height: 44px;
            text-align: center;
            position: absolute;
            top: 0;
            right: 0;
            text-align: center;
            width: 100%;
            z-index: 2;
        }
    }
    .content {
        position: relative;
        width: 100%;
        height: 603px;
        background-color: #fff;
        border-radius: 0 0 12px 12px;
        background-size: cover;
        &.nomarl {
            background-color: #e0604c;
        }
        .boxshoder {
            width: 100%;
            height: 122px;
            line-height: 122px;
            border-radius: 0 0px 55% 55%;
            z-index: 1;
            position: absolute;
            box-shadow: 0px 2px 1px #be5144;
            bottom: 22%;
        }
        .default_bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
        }
        .btn_box {
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            bottom: 73px;
            left: 50%;
            width: 130px;
            border-radius: 50%;
            height: 130px;
            background-color: #fad49f;
            color: #ac7221;
            font-size: 64px;
            transform: translateX(-50%);
            z-index: 9;
            text-align: center;
            box-sizing: border-box;
            padding: 20px;
        }
    }
}
</style>
